<template>
  <div>
    <!-- 顶部 -->
    <el-card>
      <el-row>
        <el-col :span="8"
          ><div class="grid-content bg-purple">
            <div class="el-icon-search">&nbsp;筛选搜索</div>
          </div></el-col
        >
        <el-col :span="16"
          ><div class="grid-content bg-purple right">
            <el-button size="mini" @click="reset">重置</el-button>
            <el-button type="primary" size="mini" @click="query" :disabled = "isSelect">查询搜索</el-button>
          </div></el-col
        >
      </el-row>
      <!-- 品牌名称 -->
      <el-form ref="form" :inline="true" v-model="search" label-width="150px">
        <el-form-item label="品牌名称：">
          <el-input
            placeholder="请输入品牌名称"

            v-model="search.keyword"
          ></el-input>
        </el-form-item>
        <el-form-item label="推荐状态">
          <el-select v-model="search.flag" placeholder="全部" clearable>
            <el-option label="未推荐" value="0"></el-option>
            <el-option label="推荐中" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 选择品牌 -->
    <el-card class="center">
      <el-row>
        <el-col :span="8"
          ><div class="grid-content bg-purple">
            <span class="el-icon-tickets">&nbsp;数据列表</span>
          </div></el-col
        >
        <el-col :span="16"
          ><div class="grid-content bg-purple right">
            <el-button size="mini">选择品牌</el-button>
          </div></el-col
        >
      </el-row>
    </el-card>
    <!-- 表格 -->
    <!-- @selection-change="handleSelectionChange" -->
    <el-table
      ref="multipleTable"
      :data="selectList"
      tooltip-effect="dark"
      style="width: 100%"
      border
      class="center"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="brandId" label="编号" width="120" align="center">
      </el-table-column>
      <el-table-column prop="trade" label="品牌名称" width="120" align="center">
      </el-table-column>
      <el-table-column prop="address" label="品牌LOGO" align="center">
        <template slot-scope="{ row }">
          <img :src="row.trandeImg" style="width: 150px" />
        </template>
      </el-table-column>
      <el-table-column label="是否推荐" align="center">
        <template slot-scope="{ row }">
          <el-switch
            v-model="row.code"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="changeState(row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" width="150">
        <template slot-scope="{ row }">
          <span>{{ row.code ? "已推荐" : "未推荐" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="{ row }">
          <el-popconfirm
            title="您确定要删除此品牌嘛? 此操作不可逆！"
            @onConfirm="deleteBrand(row._id)"
            @onCancel="callDel"
          >
            <el-button type="danger" size="mini" slot="reference"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[5, 10, 20]"
      :page-size="limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totals"
      style="margin-top: 30px; textalign: center"
    >
    </el-pagination>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { mockChangeState, mockDeleteBrand ,mockSearchData} from "@/api";
export default {
  name: "recommend",
  data() {
    return {
      isRecommend: true, // 推荐状态
      page: 1,
      limit: 5,
      search: {
        keyword: "", //搜索关键字
        flag: "", //0---未推荐   1-- 推荐
      },
      searchL:{}, 
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 获取列表数据(使用vuex)
    getData() {
      let { limit, page } = this;
      this.$store.dispatch("getBrandList", { limit, page });
    },
    // 一页展示条数变化
    handleSizeChange(val) {
      this.limit = val;
      this.getData();
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },
    // 修改推荐状态（不使用vuex）   就是玩！！！！
    async changeState(row) {
      let id = row._id;
      let data = row.code;
      let result = await mockChangeState(id, data);
      if (result.status == 200) {
        this.$message({
          type: "success",
          message: "修改成功!",
        });
      } else {
        alert("阿哦！请求出错了,请检查网络后重试");
      }

      // this.$confirm("是否要修改推荐状态?", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // })
      //   .then(() => {

      //   })
      //   .catch(() => {
      //     this.$message({
      //       type: "info",
      //       message: "已取消修改",
      //     });
      //   });
    },
    // 确定删除推荐品牌
    async deleteBrand(id) {
      let result = await mockDeleteBrand(id);
      if (result.status == 200) {
        this.$message({
          type: "success",
          message: "删除成功!",
        });
        this.getData();
      } else {
        alert("阿哦！请求出错了,请检查网络后重试");
      }
    },
    // 取消删除推荐品牌
    callDel() {
      this.$message({
        type: "info",
        message: "已取消删除操作",
      });
    },
    // 重置搜索
    reset() {
      this.search.flag = ''
      this.search.keyword = ''
      this.searchL = {}
      this.getData();
    },
    // 搜索
    async query(){
      // 默认查询已推荐品牌  true为已推荐|false未推荐
      let code = (this.search.flag == 1 || this.search.flag == '')? true :false;
      // 如果关键字没传，手动给他写成了undefined
      let key = this.search.keyword == ''?undefined:this.search.keyword
      let result = await mockSearchData(key, code)
      if(result.status == 200){
        this.searchL = result.data
        this.$message({
          type: "success",
          message: "搜索成功!",
        });
      }else{
        this.$message({
        type: "info",
        message: "数据请求失败，请稍后重试",
      });
      }
      this.search.flag = ''
      this.search.keyword = ''
    }
  },
  computed: {
    ...mapState({ table: (state) => state.recommend.BrandData.result || []}),
    ...mapState({ total: (state) => state.recommend.BrandData.total || 0 }),
    // 最少选择一个才可搜索
    isSelect(){
      let {keyword,flag} = this.search
      if(keyword == '' && flag == ''){
        return true
      }else{
        return false
      }
    } ,
    // 搜索到的列表
    selectList(){
      if(!this.searchL.data){
        return this.table
      }else{
        return this.searchL.data
      }
    },
    // 搜索到的数据数量
    totals(){
      if(!this.searchL.data){
        return this.total
      }else{
        return this.searchL.total
      }
    }
  },
};
</script>

<style scoped>
.right {
  float: right;
}
.center {
  margin: 20px 0;
}
</style>